<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的常用控件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <form>
<!--        给vue中的account赋值 .trim 去掉前后空格 -->
        账户:<input type="text" v-model.trim="account" name="account"><br>
        密码:<input type="password" v-model="password" name="pwd"><br>

<!--        type="number" 控制输入框中为数字 v-model.number="age" 控制数据为数字 -->
        年龄:<input type="number" v-model.number="age" name="pwd"><br>
        性别:
<!--        这里必须要加 value并且指定值 -->
        <input type="radio" name="gender" v-model="gender" value="female">男
        <input type="radio" name="gender" v-model="gender" value="male">女
        <br>
        爱好:
<!--        这里要用数组接收 并且也必须要设置 value -->
        <input type="checkbox" name="hobby" v-model="hobby" value="smoke">抽烟
        <input type="checkbox" name="hobby" v-model="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" v-model="hobby" value="perm">烫头<br>
        其他:
<!--        设置一个懒加载 即 失去焦点之后加载 -->
        <textarea name="other" v-model.lazy="other" cols="23" rows="3"></textarea><br>
        籍贯:
        <select name="place" v-model="area" >
            <option value="豫" selected>河南</option>
            <option value="晋">山西</option>
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
        </select>
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="重置">
        <button type="button">检测账户是否被注册过</button>
    </form>
</div>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            account:'',
            password:'',
            age:18,
            gender:'',
            hobby: [],
            other:'',
            area:''
        }
    })
</script>

</body>
</html>